<div class="swiperbox relative" id="swiperbox-{$widget_data.uniqueid}">
    <div class="bg absolute"></div>
    <div class="content pl10 pr10">
        <!--{if !$widget_data.images}-->
        <div class="empty padding10 center relative"><i class="iconfont icon-tupianlunbo1 gray"
                style="font-size: 50px;"></i>
        </div>
        <!--{else}-->
        <div class="scroller">
            <ul class="bd">
                <!--{foreach from=$widget_data.images item=item}-->
                <li><a href='{$item.ad_link_url}'><img src="{$item.ad_image_url|url_format}" /></a></li>
                <!--{/foreach}-->
            </ul>
            <ul class="hd"></ul>
        </div>
        <!--{/if}-->
    </div>
</div>

<style>
    .swiperbox {
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .swiperbox .scroller img {
        width: 100%;
        display: block;
    }

    .swiperbox .hd {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 10px;
        z-index: 99;
    }

    .swiperbox .hd li {
        display: inline-block;
        margin: 0 2px;
        width: 7px;
        height: 7px;
        border-radius: 6px;
        background: #fff;
        overflow: hidden;
        color: #fff;
        font-size: 0;
    }

    .swiperbox .hd li.active,
    .swiperbox .hd li:hover {
        background: #fc2b34;
        color: #fc2b34;
    }

    .swiperbox .bg {
        width: calc(100% + 200px);
        background: #fc2b34;
        height: 200px;
        border-radius: 100%;
        margin-left: -100px;
        margin-top: -100px;
    }

    .swiperbox .bd li img {
        border-radius: 10px;
    }

    .swiperbox .empty {
        background-color: #ededed;
        height: 100px;
        line-height: 100px;
        border-radius: 10px;
    }
</style>


<script type="text/javascript">
    $(function () {

        /* {if $widget_data.radius eq 'square'} */
        $('#swiperbox-{$widget_data.uniqueid} .content').css('padding', 0);
        $('#swiperbox-{$widget_data.uniqueid} .bg').css('padding', 0).css('display', 'none');
        $('#swiperbox-{$widget_data.uniqueid} .bd li img').css('border-radius', 0);
        $('#swiperbox-{$widget_data.uniqueid} .empty').css('border-radius', 0);
        /* {/if} */

        $('#swiperbox-{$widget_data.uniqueid} .bg').css('background', '{$widget_data.bgcolor|default:"#fc2b34"}');
        $('#swiperbox-{$widget_data.uniqueid}').css('padding-top', '{$widget_data.space|default:0}px');

        /* {if $widget_data.images} */
        TouchSlide({
            slideCell: "#swiperbox-{$widget_data.uniqueid}",
            titCell: ".hd",
            mainCell: ".bd",
            effect: "leftLoop",
            autoPlay: true,
            autoPage: true,
            titOnClassName: "active",
            delayTime: 1000,
            interTime: 5000
        });
        /* {/if} */
    })
</script>